<template>
  <el-container>
    <el-header>
      <!-- <div class="left-panel">
        <el-button type="primary" icon="el-icon-plus"></el-button>
        <el-button type="danger" plain icon="el-icon-delete"></el-button>
      </div> -->
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input
            v-model="search.cKeywords"
            placeholder="登录账号 / 姓名"
            clearable
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="upsearch"
          ></el-button>
          <el-button type="warning" @click="reload">重置</el-button>
        </div>
      </div>
    </el-header>

    <el-main class="nopadding">
      <scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column
          label="商品名称"
          prop="cName"
          show-overflow-tooltip
          :filters="sexFilters"
          :filter-method="filterHandler"
        ></el-table-column>

        <!-- <el-table-column
          label="邮箱"
          prop="email"
          width="250"
        ></el-table-column>
        <el-table-column
          label="评分"
          prop="num"
          width="150"
          sortable
        ></el-table-column>
        <el-table-column label="进度" prop="progress" width="250" sortable>
          <template #default="scope">
            <el-progress :percentage="scope.row.progress" />
          </template>
        </el-table-column> -->
        <el-table-column
          label="注册时间"
          prop="tCreateDate"
          sortable
        ></el-table-column>
      </scTable>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "tableBase",
  data() {
    return {
      search: {
        cKeywords: "",
      },
      sexFilters: [
        { text: "男", value: "男" },
        { text: "女", value: "女" },
      ],
      list: {
        apiObj: this.$API.system.GetProductInfoPageList,
      },
    };
  },
  methods: {
    reload() {
      this.$refs.table.reload();
    },
    //搜索
    upsearch() {
      this.$refs.table.upData(this.search);
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
  },
};
</script>

<style></style>
